<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>鼠标事件-基本介绍(Mouse Events - Basic Introduction)</title>
  <!-- 
  在JavaScript中，鼠标事件是用户与网页交互时最常用的事件类型之一。鼠标事件允许开发者响应用户的鼠标操作，如点击、移动、滚动等。
  一、常见的鼠标事件
  1. click：当用户单击鼠标时触发。适用于按钮、链接等可交互元素。
    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      alert('按钮被点击了！');
    });
  2. dblclick：当用户双击鼠标时触发。常用于需要快速选择或编辑的场景。
    const text = document.getElementById('myText');
    text.addEventListener('dblclick', function() {
      alert('文本被双击了！');
    });
  3. mouseover  和  mouseout：
    -  mouseover ：当鼠标指针移动到元素上方时触发。
    -  mouseout ：当鼠标指针移出元素时触发。这两个事件常用于实现悬停效果。
    const box = document.getElementById('myBox');
    box.addEventListener('mouseover', function() {
        box.style.backgroundColor = 'lightblue';
    });
    box.addEventListener('mouseout', function() {
        box.style.backgroundColor = '';
    });
  4. mousemove：当鼠标在元素内移动时持续触发。可以用于绘图应用或实时反馈。

     示例：
  const area = document.getElementById('myArea');
    area.addEventListener('mousemove', function(event) {
        const x = event.clientX;
        const y = event.clientY;
        console.log(鼠标位置：(${x}, ${y}));
    });
  5. mousedown  和  mouseup：
    -  mousedown ：当用户按下鼠标按钮时触发。
    -  mouseup ：当用户释放鼠标按钮时触发。这两个事件常用于实现拖放功能。
    const draggable = document.getElementById('draggable');
    draggable.addEventListener('mousedown', function() {
        console.log('鼠标按下');
    });
    draggable.addEventListener('mouseup', function() {
        console.log('鼠标释放');
    });

  二、事件对象
  每个鼠标事件都会生成一个事件对象，包含有关事件的信息。常用的属性包括：
  -  clientX  和  clientY ：鼠标相对于浏览器窗口的位置。
  -  button ：指示哪个鼠标按钮被按下（0：左键，1：中键，2：右键）。
  -  target ：触发事件的目标元素。

  三、总结
  - 鼠标事件是JavaScript中重要的事件类型，常用于处理用户的鼠标交互。
  - 常见的鼠标事件包括  click 、 dblclick 、 mouseover 、 mouseout 、 mousemove 、 mousedown  和  mouseup 。
   -->
  <style>
    .mouse-event {
      width: 300px;
      height: 300px;
      background-color: lightblue;
      margin: 30px;
    }
  </style>
</head>
<body>

  <div class="mouse-event"></div>

  <script>
    const mouseEvent = document.querySelector('.mouse-event');
    // 1. 点击事件触发
    mouseEvent.addEventListener('click', function(event) {
      console.log('点击事件触发', event.clientX, event.clientY, event);
    });
    // 2. 双击事件触发
    mouseEvent.addEventListener('dblclick', function(event) {
      console.log('双击事件触发', event.clientX, event.clientY, event);
    });
    // 3. 鼠标移入事件触发
    mouseEvent.addEventListener('mouseover', function(event) {
      console.log('鼠标移入事件触发', event.clientX, event.clientY, event);
    });
    // 4. 鼠标移出事件触发
    mouseEvent.addEventListener('mouseout', function(event) {
      console.log('鼠标移出事件触发', event.clientX, event.clientY, event);
    });
    let isDown = false // 记录鼠标是否按下
    // 5. 鼠标移动事件触发
    mouseEvent.addEventListener('mousemove', function(event) {
      if (isDown) {
        console.log('鼠标移动事件触发', event.clientX, event.clientY, event);
      }
    });
    // 6. 鼠标按下事件触发
    mouseEvent.addEventListener('mousedown', function(event) {
      console.log('鼠标按下事件触发', event.clientX, event.clientY, event);
      isDown = true
    });
    // 7. 鼠标松开事件触发
    mouseEvent.addEventListener('mouseup', function(event) {
      console.log('鼠标松开事件触发', event.clientX, event.clientY, event);
      isDown = false
    });
  </script>
  
</body>
</html>